import React from 'react'
import Link from 'gatsby-link'
import * as Scroll from 'react-scroll';
import { Link as SLink} from 'react-scroll'
 

class Nav extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            navSize:-1,
        }
        this.scrollHandler = this.onHandleScroll.bind(this);
        this.windowResizeHandler = this.onWindowResizeHandler.bind(this);
    }
    onHandleScroll(event) {
        const obj=this.initNav();
        if (event.pageY-obj.offsetTop<this.state.navSize && obj.offsetTop==0) {
          obj.className='';
        }else if(event.pageY-obj.offsetTop >= 0){
          obj.className='alt';
        }
    }
    onWindowResizeHandler(event) {
        this.initNav();
    }
    initNav(){
        const obj = document.getElementById('nav');
        obj.className='';
        this.setState({
            navSize:-1
        })
        return obj;
    }
    componentDidMount () {
        window.addEventListener('scroll', this.scrollHandler);
        window.addEventListener('resize', this.windowResizeHandler)
    }

    componentWillUnmount () {
        this.initNav();
        window.removeEventListener('resize', this.windowResizeHandler)
        window.removeEventListener('scroll', this.scrollHandler);
    }
    handleToggleNav(e) {
       e.target.className='active';
    }
    render() {
        return (
            
            <nav id="nav">
                <ul>
                    <li><SLink to="intro" spy={true} smooth={true} offset={-100} duration={1000}>Introduction</SLink></li>
                    <li><SLink to="first" spy={true} smooth={true} offset={-100} duration={1000}>First Section</SLink></li>
                    <li><SLink to="second" spy={true} smooth={true} offset={-100} duration={1000}>Second Section</SLink></li>
                    <li><SLink to="cta" spy={true} smooth={true} offset={-100} duration={1000}>Get Started</SLink></li>
                </ul>
            </nav>
        )
    }
}

export default Nav
